<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>烟花效果</title>
    <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden
      };
    </style>
  </head>
  <body onload="draw()">
    <div id="xx" style="position: absolute;top: 0px;left: 0;color: white;cursor: pointer;">播放音乐</div>
    <canvas></canvas>
    <script src="./js/flower.js"></script>
    <script src="./js/flowersnum.js"></script>
    <div style="position: absolute;z-index: 999999999;">
      <div style="display: flex; justify-content: space-around;width: 100vw;align-items: center;">
        <input id="num" type="number" placeholder="发射烟花数">
        <input id="count" type="number" placeholder="烟花爆炸的粒子数">
      </div>
    </div>
    <audio id="myAudi"  loop style="width: 0px;" controls autoplay src="./8da8ca3ee953a993882cadb3da6e3825.mp3"></audio>
  </body>
  </html>
  <script>
    document.querySelector('#xx').addEventListener("click",function(){
      const audio = document.querySelector('#myAudi');
      if (audio.paused) { //判读是否播放
        audio.paused=false;
        audio.play(); //没有就播放
        }
    })
    let timeTicker = 0
    // 动画执行80次，发射8个烟花
    let timeTotal =40
    let fireworks = []
    // 一个烟花有多少个粒子
    let particlesCount = 50
    let particles = []
    let flag=false;
    function draw() {
      const canvas = document.querySelector('canvas')
      const ctx = canvas.getContext('2d');
      if(!flag){
        canvas.height=window.innerHeight*0.95;
        canvas.width=window.innerWidth;
        flag=true
      }
      // 透明度控制拖尾效果
      ctx.fillStyle = 'rgba(0,0,0,0.03)'
      ctx.fillRect(0, 0, canvas.width, canvas.height)

      // 画烟花
      for (let index = 0; index < fireworks.length; index++) {
        const firework = fireworks[index]
        firework.draw(ctx)
        if (firework.isArrived()) {
          fireworks.splice(index, 1)
          index--
          for (let j = 0; j < particlesCount; j++) {
            particles.push(
              new Particle(
                ...firework.getTargetCoordinate(),
                firework.getHue()
              )
            )
          }
        }
      }

      // 画粒子
      for (let index = 0; index < particles.length; index++) {
        const particle = particles[index]
        particle.draw(ctx)
        if (particle.isVanished()) {
          particles.splice(index, 1)
          index--
        }
      }

      // 函数循环80次自动发射8支烟花
      if (timeTicker >= timeTotal) {
        for (let index = 0; index < timeTotal / 10; index++) {
          fireworks.push(
            new FireWork(
              canvas.width / 2,
              canvas.height,
              getRandomRange(0, canvas.width),
              getRandomRange(100, canvas.height / 2)
            )
          )
        }
        timeTicker = 0
      } else {
        timeTicker++
      }

      requestAnimationFrame(draw)
    }

    function getRandomRange(min, max) {
      return Math.random() * (max - min) + min
    }
    //烟花数
    document.querySelector('#num').addEventListener('change',e=>{
      //*10
      if(e.target.value>0){
        timeTotal=e.target.value*10
      }else{
        timeTotal=40;
        e.target.value='';
        alert("不用输入负数！已重置烟花数")
      }
    })
    document.querySelector("#count").addEventListener('change',e=>{
      if(e.target.value>0){
        particlesCount=e.target.value
      }else{
        particlesCount=50;
        e.target.value='';
        alert("不用输入负数！已重置烟花数")
      }
    })
  </script>

